
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="__CSS__/mui.min.css">
    <link rel="stylesheet" href="__JS__/layui/css/layui.css">

    <script src="__JS__/jquery.min.js"></script>
    <script src="__JS__/layui/layui.js"></script>
    <style>
        /*body{font-size: 14px ;}*/
        .mui-content{background-color: #fff;}
        .mui-content-padded{padding: 10px 0}
        .app_desc{
            color: rgba(13, 12, 13, 0.85);
            line-height: 25px;
            font-size: 15px;
            margin-top: 20px;
        }
        .rnums{margin-top:20px;color:#999;}
        .app_detailAll{text-align: center;font-size: 14px;}
        .app_detailAll a{color:#2da5ff;}
        .app_comment{text-align: center;font-size: 14px;}
        .app_comment a{color:#2da5ff;}

        .pinglun{
            margin-top: 50px
        ;
        }
    </style>
</head>
<body style="background-color: #fff">
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">详情</h1>
</header>
<div class="mui-content">
    <div class="mui-content-padded">
        <h4 style="padding-bottom: 10px">{$data.title}</h4>
        <p>
            <span style='margin-right: 10px;'>{$data.create_time}</span>
            <span style='margin-right: 10px;'>{$data.author}</span>
        </p>
        <div class="app_desc">
            <div class="app_detail" id="app_detail" style="max-height:800px;overflow:hidden;">

            </div>
            <div class='rnums'><span>阅读数:<i>{$data.click_num}</i></span></div>
            <div class="app_detailAll"><a href="javascript:;" id="ReadAll">展开全文</a></div>
        </div>
        <script>
            // document.getElementById('app_detail').innerHTML="{$data.body}"
            $("#ReadAll").on("click",function(){
                $("#app_detail").css("max-height","none");
                $(".app_detailAll").hide();
            });
        </script>


        <fieldset class="layui-elem-field layui-field-title">
            <legend>评论</legend>
            <div class="layui-field-box">
                <textarea rows="4" id="comtext"></textarea>
                <div style="text-align: right"><button type="button" class="mui-btn" id="subcom">发表</button></div>
            </div>
        </fieldset>
        <script type="text/javascript">
            var aid = "{$data.id}";
            $("#subcom").click(function () {
                var con = $.trim($("#comtext").val());
                if(con !=''){
                    $.post("{:url('index/comment')}",{"content":con,"article_id":aid},function (res) {
                        if(res.code){
                            layui.use('layer', function(){
                                var layer = layui.layer;
                                layer.msg(res.msg);
                            });
                            setTimeout(function () {
                                location.reload()
                            }, 1500);
                        }
                    })
                }
            })
        </script>
        <fieldset class="layui-elem-field">
            <legend>热评</legend>
            <div class="layui-field-box">
                <ul class="layui-timeline" style="margin-top: 10px">
                </ul>
                <div class="app_comment" style="margin-top: 10px"><a href="javascript:;" id="allcomment" onclick="load_comment()">更多评论</a></div>
            </div>
        </fieldset>
        <input type="hidden" value="{$data.body}" id="con">
    </div>
</div>
</body>
<script src="__JS__/mui.min.js"></script>
<script>
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });

    var aid = "{$data.id}";
    var page = 1;
    var count = 5
    load_comment();
    function load_comment(){
        $.get("{:url('index/comment')}",{"article_id":aid,"page":page,"count":count},function (res) {
            if(res.code){
                if(res.msg.length){
                    var item = '';
                    $(res.msg).each(function (i,v) {
                        console.log(v)
                        item+='<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis">&#xe63f;</i><div class="layui-timeline-content layui-text">';
                        item+='<h4 class="layui-timeline-title">'+v.create_time+'</h4><p>'+v.content+'</p></div></li>';
                    })
                    $(".layui-timeline").append(item)
                    page++;
                }
                if(res.msg.length < count){
                    $("#allcomment").html('没有评论了')
                }
            }
        })
    }



    // document.getElementById('app_detail').innerHTML="{$data.body}"
    // var cc = "{$data.body}";

    $("#app_detail").html($("#con").val());

</script>
</html>